<template>
	<view class="content">
		<view class="top_box">
			<view class="sbox">
				<view class="item">
					<text class="text">已邀请好友</text>
					<view class="n">
						<text class="num">{{info.invitecount || 0}}</text>
						<text class="t">位</text>
					</view>
				</view>
				<view class="item">
					<text class="text">可提现收益</text>
					<view class="n">
						<text class="num">{{info.income || 0}}</text>
						<text class="t">元</text>
					</view>
				</view>
				<view class="item">
					<text class="text">在途收益</text>
					<view class="n">
						<text class="num">{{info.waitIncome || 0}}</text>
						<text class="t">元</text>
					</view>
				</view>
			</view>
			<view class="btn_box">
				<view class="btn1" @click="handleToCashList">
					提现记录
				</view>
				<view class="btn2" @click="handleToCash">
					提现
				</view>
			</view>
		</view>
		
		<view class="bot_box">
			<view class="title">
				<text class="text">会员佣金</text>
				<!-- <view class="s">
					今日
					<u-icon name="arrow-down-fill" color="#666" size="12"></u-icon>
				</view> -->
			</view>
			<view class="tbox" v-if="list.length">
				<view class="item" v-for="item in list" :key="item.id">
					<view class="utop">
						<view class="user">
							<image :src="item.pic" mode="" class="u"></image>
							<text>{{item.nickName}}</text>
							<!-- <image src="/static/uu.png" mode="" class="v"></image> -->
						</view>
						<view class="r">
							会员收益0
						</view>
						<!-- <view class="r">
							会员收益{{item.vipCommission}}
						</view> -->
					</view>
					<view class="data">
						<view class="ditem" @click="handleToOrderList(item.memberId)">
							<view class="top">
								<text class="num">{{item.orderCount}}</text>
							</view>
							<view class="b">
								下单数
							</view>
						</view>
						<view class="ditem">
							<view class="top">
								<text class="num">{{item.orderPrice}}</text>
								<text class="v">元</text>
							</view>
							<view class="b">
								下单金额
							</view>
						</view>
						<view class="ditem">
							<view class="top">
								<text class="num">0</text>
								<!-- <text class="num">{{item.commission}}</text> -->
								<text class="v">元</text>
							</view>
							<view class="b">
								佣金收益
							</view>
						</view>
					</view>
				</view>
				<u-loadmore class="loadmore" :status="status" v-if="pageNum > 1" />
			</view>
			
			<view class="null" v-else>
				<u-empty text="暂无内容" icon="/static/e.png" marginTop="100" ></u-empty>
			</view> 
		</view>
		<view class="button" @click="handleToPoster">
			邀请好友
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageNum:1,
				status: 'loadmore', 
				allData: false,
				info:'',
				list:[]
			}
		},
		onLoad() {
			this.getDetail()
			this.getList()
		},
		
		onReachBottom() {
			if (this.allData) {
				this.status = 'loading'
				this.pageNum++
				this.getList();
			}
		},
		methods:{
			handleToDetail(){
				uni.navigateTo({
					url:"./detail"
				})
			},
			handleToPoster(){
				uni.navigateTo({
					url:"./poster"
				})
			},
			handleToOrderList(id){
				uni.navigateTo({
					url:`./order?memberId=${id}`
				})
			},
			getList(){
				this.$http({
					url:"/umsVaultDetail/commissionQuery",
					method:"get",
					data:{
						pageNum:this.pageNum,
						pageSize:10
					}
				}).then(data=>{
					this.list = data.list
				})
			},
			getDetail(){
				this.$http({
					url:"/umsVault/queryOwnInfo",
					method:"get"
				}).then(data=>{
					this.info = data
				})
			},
			handleToCashList(){
				uni.navigateTo({
					url:"./cash_list"
				})
			},
			handleToCash(){
				uni.navigateTo({
					url:"./cash"
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.content{
		padding: 30rpx;
		box-sizing: border-box;
		.button{
			width: 690rpx;
			height: 88rpx;
			background: #020202;
			border-radius: 50rpx;
			text-align: center;
			line-height: 88rpx;
			position: fixed;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: 80rpx;
			color: #fff;
			font-size: 30rpx;
		}
		.bot_box{
			margin-top: 48rpx;
			.tbox{
				.item{
					background: #fff;
					margin-bottom: 30rpx;
					padding: 24rpx;
					box-sizing: border-box;
					padding-bottom: 30rpx;
					.data{
						display: flex;
						align-items: center;
						justify-content: center;
						.ditem{
							width: 32%;
							border-right: 1px solid #DBDBDB;
							&:last-child{
								border-right:none;
							}
							.top{
								text-align: center;
								.num{
									font-size: 36rpx;
									color: #020202;
								}
								.v{
									font-size: 24rpx;
									color: #020202;
								}
							}
							.b{
								font-size: 24rpx;
								color: #999999;
								text-align: center;
								margin-top: 16rpx;
							}
						}
					}
					.utop{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 40rpx;
						.r{
							font-size: 24rpx;
							color: #020202;
						}
						.user{
							display: flex;
							align-items: center;
							.u{
								width: 56rpx;
								height: 56rpx;
								display: block;
								border-radius: 50%;
								margin-right: 10rpx;
							}
							text{
								font-size: 28rpx;
								color: #333;
							}
							.v{
								display: block;
								width: 24rpx;
								height: 20rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
				.text{
					font-size: 30rpx;
					color: #020202;
					font-weight: bold;
				}
				.s{
					display: flex;
					align-items: center;
					width: 100rpx;
					height: 40rpx;
					background: #FFFFFF;
					border-radius: 2rpx;
					justify-content: center;
					color: #666666;
					font-size: 22rpx;
					border: 1px solid #020202;
				}
			}
		}
		.top_box{
			background: #fff;
			padding: 40rpx 0;
			.btn_box{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 50rpx;
				.btn1{
					width: 220rpx;
					height: 72rpx;
					background: #F8F8F8;
					border-radius: 50rpx;
					text-align: center;
					line-height: 72rpx;
					font-size: 26rpx;
					color: #020202;
					margin-right: 40rpx;
				}
				.btn2{
					width: 220rpx;
					height: 72rpx;
					background: #020202;
					border-radius: 50rpx;
					text-align: center;
					line-height: 72rpx;
					color: #fff;
					font-size: 26rpx;
					margin-left: 40rpx;
				}
			}
			.sbox{
				display: flex;
				align-items: center;
				justify-content: center;
				.item{
					width: 33%;
					border-right: 1px solid #DBDBDB;
					&:last-child{
						border-right:none;
					}
					.text{
						font-size: 24rpx;
						color: #999999;
						text-align: center;
						display: block;
						margin-bottom: 16rpx;
					}
					.n{
						display: flex;
						align-items: flex-end;
						justify-content: center;
						.num{
							font-size: 36rpx;
							color: #020202;
						}
						.t{
							font-size: 24rpx;
							margin-left: 6rpx;
							position: relative;
							top: -2px;
							color: #020202;
						}
					}
				}
			}
		}
	}
</style>